<template>
    <!-- 试卷状态[1未考试,2待考试,3待阅卷,4已通过,5未通过] -->
    <el-row class="header-row" justify="space-evenly">
        <el-col :span="8">
            <div class="left" v-if="status === 2">
                倒计时：<span :style="{ color: color }">{{ time }}</span>
            </div>
            <div class="left" v-else>
                <el-tag type="danger" v-if="status === 1">未考试</el-tag>
                <el-tag type="warning" v-if="status === 3">待阅卷</el-tag>
                <el-tag type="success" v-if="status === 4">已通过</el-tag>
                <el-tag type="danger" v-if="status === 5">未通过</el-tag>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="middle">{{ paper.name }}</div>
        </el-col>
        <el-col :span="8">
            <div class="right">
                <el-button :icon="Check" round type="success" v-if="status === 2" size="default" @click="onPaperSubmit(false)">交卷</el-button>
                <el-button :icon="Back" round size="default" @click="onBack">返回</el-button>
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { ref, inject, onMounted, onBeforeUnmount } from "vue";
import { dayjs } from "element-plus";
import duration from "dayjs/plugin/duration";
import { Check, Back } from "@element-plus/icons-vue";

//获取自定义全局方法
const { emitter, box, authStore } = inject<any>("method");

//父传子
interface Props {
    paper?: Record<string, any>;
    status?: number | null;
    paperScore?: number | null;
}
const props = withDefaults(defineProps<Props>(), {
    paper: () => ({}),
    status: null,
    paperScore: null,
});

const color = ref<string>("");
//启用 duration 插件
dayjs.extend(duration);
//动态时间显示
const time = ref<string>("");
//存储定时器ID
const intervalId = ref<number | undefined>(undefined);
//倒计时初始化
const initTime = () => {
    if (props.status !== 2) return;
    const start = dayjs(props.paper.startTime);
    const end = dayjs(props.paper.endTime);
    const now = dayjs();
    if (start.isBefore(now) && now.isBefore(end)) {
        intervalId.value = setInterval(() => {
            const diff = dayjs.duration(end.diff(dayjs()));
            if (diff.years() > 0) {
                time.value = `大于${diff.years()}年`;
                color.value = "green";
                return;
            } else if (diff.months() > 0) {
                time.value = `大于${diff.months()}个月`;
                color.value = "green";
                return;
            } else if (diff.days() > 0) {
                time.value = `大于${diff.days()}天`;
                color.value = "green";
                return;
            } else {
                //小于一天的，显示时分秒
                time.value = diff.format("HH:mm:ss");
                const [hours, minutes, seconds] = time.value.split(":").map(Number);
                const value = dayjs.duration({ hours, minutes, seconds }).asSeconds();
                if (value <= 0) {
                    onPaperSubmit(true); //交卷
                    clearInterval(intervalId.value);
                } else if (value <= 300) {
                    if (value === 300) {
                        emitter.emit("msg-warning", "据考试结束还有5分钟，请尽快完成考试！");
                    }
                    color.value = "red";
                } else if (value <= 1800) {
                    if (value === 1800) {
                        emitter.emit("msg-warning", "据考试结束还有30分钟！");
                    }
                    color.value = "#e6a23c";
                } else {
                    color.value = "green";
                }
            }
        }, 1000);
    }
};

//使用defineEmits注册一个自定义事件
const emit = defineEmits(["on-back", "on-paper-submit"]);

//交卷(是手动还是自动)
const onPaperSubmit = (isAuto: boolean) => emit("on-paper-submit", isAuto);

//返回
const onBack = () => {
    if (props.status === 2) {
        box.confirm("返回后将清空所有答案，确定要返回吗？", "返回", () => {
            authStore.clearExamAnswerMap();
            emit("on-back");
        });
    } else {
        emit("on-back");
    }
};

//挂载时初始化时间
onMounted(() => initTime());

//卸载时清除定时器
onBeforeUnmount(() => {
    if (intervalId.value) {
        clearInterval(intervalId.value);
    }
});
</script>

<style scoped lang="less">
.header-row {
    .left {
        font-size: large;
        font-weight: bold;
        padding-left: 10px;
    }
    .middle {
        text-align: center;
        font-size: large;
        font-weight: bold;
    }
    .right {
        float: right;
        margin-right: 5px;
    }
}
</style>
